<template>
  <div>
    <div class="w iconfont icon-jiantou" @click="onClickLeft"></div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiper" :key="item"
        ><img :src="item"
      /></van-swipe-item>
    </van-swipe>
    <div class="box">
      <h5>{{ this.list.name }}</h5>
      <p class="p1">{{ this.list.characteristic }}</p>
      <p style="margin-left: 20px">
        <span style="color: red">低价￥{{ this.list.minPrice }}</span
        ><span class="p2">原价{{ this.list.originalPrice }}</span
        ><span class="p2">库车{{ this.list.stores }}</span>
      </p>
    </div>
    <div class="q1" v-html="this.content.content"></div>
  </div>
</template>
<script>
import "../../css/v-html.css";
export default {
  data() {
    return {
      swiper: [],
      list: [],
      content: [],
    };
  },
  mounted() {
    this.$API.kanxiang(this.$route.query.id).then((res) => {
      this.swiper = res.data.data.pics2;
      this.list = res.data.data.basicInfo;
      this.content = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/kanjia" });
    },
  },
};
</script>
<style  scoped>
.w {
  width: 30px;
  height: 30px;
  position: fixed;
  background: #fff;
  top: 20px;
  left: 20px;
  z-index: 99999;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 26px;
}
.my-swipe .van-swipe-item {
  width: 100%;
  height: 360px;
}
img {
  width: 100%;
  height: 100%;
}
.box {
  width: 100%;
  height: 130px;
  padding-top: 0.1px;
}
h5 {
  margin-top: 20px;
  margin-left: 20px;
}
.p1 {
  margin-top: -10px;
  margin-left: 20px;
  font-size: 10px;
  color: lightslategrey;
}
.p2 {
  margin-left: 60px;
  font-size: 10px;
  color: lightslategrey;
}
</style>